<template>
  <div class="detailbox">
    <div class="flexbox">
      <div class="shrinkbox_v2">
        密钥ID
      </div>
      <div class="contentbox_v2">
        <el-input v-if="!feildConfig.isReadonly" class="diyinput" v-model="editData.secretKey" placeholder="请输入密钥ID"></el-input>
        <div v-else class="div_input">
          {{ editData.secretKey }}
        </div>
      </div>
    </div>
    <div class="flexbox">
      <div class="shrinkbox_v2">
        密钥类型
      </div>
      <div class="contentbox_v2">
        <el-select v-if="!feildConfig.isReadonly" v-model="editData.secretKeyType" class="diyselect" placeholder="请选择密钥类型">
          <el-option label="黑锁" :value="0" />
          <el-option label="白锁" :value="1" />
        </el-select>
        <div v-else class="div_input">
          {{ editData.secretKeyType == 0 ? '黑锁' : '白锁' }}
        </div>
      </div>
      <div class="shrinkbox_v2">
        购买时间
      </div>
      <div class="contentbox_v2 diydatapicker">
        <el-date-picker v-if="!feildConfig.isReadonly"
          v-model="editData.buyTime"
          type="date"
          placeholder="选择日期"/>
        <div v-else class="div_input">
          {{ editData.buyTime }}
        </div>
      </div>
    </div>
    
    <div class="flexbox">
      <div class="shrinkbox_v2">
        配对密钥
      </div>
      <div class="contentbox_v2">
        <el-select
          v-if="!feildConfig.isReadonly"
          class="diyselect"
          v-model="editData.bindSecretKeyId"
          filterable
          remote
          clearable
          reserve-keyword
          placeholder="请输入相应配对密钥"
          :remote-method="(val) => remoteMethod_1(val)"
          :loading="loadingKeyData"
        >
          <el-option
            v-for="item in keyList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <!-- <el-select v-if="!feildConfig.isReadonly" v-model="editData.secretKeyType" class="diyselect" placeholder="请选择密钥类型">
          <el-option label="黑锁" :value="0" />
          <el-option label="白锁" :value="1" />
        </el-select> -->
        <div v-else class="div_input">
          {{ editData.bindSecretKey }}
        </div>
      </div>
    </div>

    <div class="flexbox">
      <div class="shrinkbox_v2">
        企业列表
      </div>
      <div class="contentbox_v2">
        <el-select v-if="!feildConfig.isReadonly" 
          class="diyselect"
          v-model="editData.enterpriseId"
          filterable
          remote
          clearable
          reserve-keyword
          placeholder="请输入相应公司名称"
          @change="getEntUserById(editData.enterpriseId)"
          :remote-method="remoteMethod"
          :loading="loading">
          <el-option
            v-for="item in enterpriseList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <div v-else class="div_input">
          {{ editData.enterpriseName }}
        </div>
      </div>
      <div class="shrinkbox_v2">
        企业成员
      </div>
      <div class="contentbox_v2">
        <el-select v-if="!feildConfig.isReadonly" 
          class="diyselect"
          v-model="editData.entUserId"
          filterable
          remote
          clearable
          reserve-keyword
          placeholder="请输入相应企业成员"
          :loading="loadingEntUser">
          <el-option
            v-for="item in entUserList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <div v-else class="div_input">
          {{ editData.entUserName }}
        </div>
      </div>
    </div>

    <div class="flexbox">
      <!-- <div class="shrinkbox_v2">
        代理商列表
      </div>
      <div class="contentbox_v2">
        <el-select v-if="!feildConfig.isReadonly" 
          class="diyselect"
          v-model="editData.agentId"
          filterable
          remote
          clearable
          reserve-keyword
          placeholder="请输入相应代理商列表"
          @change="getAgentUserById(editData.agentId)"
          :remote-method="remoteMethodAgent"
          :loading="loadingAgent">
          <el-option
            v-for="item in agentList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <div v-else class="div_input">
          {{ editData.agentName }}
        </div>
      </div> -->
      <div class="shrinkbox_v2">
        成员
      </div>
      <div class="contentbox_v2">
        <el-select v-if="!feildConfig.isReadonly" 
          class="diyselect"
          v-model="editData.agentUserId"
          filterable
          remote
          clearable
          reserve-keyword
          placeholder="请输入相应成员"
          :loading="loadingAgentUser">
          <el-option
            v-for="item in agentUserList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <div v-else class="div_input">
          {{ editData.agentUserName }}
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
  import { ref, inject, defineEmits } from 'vue'
  // import { useStore } from 'vuex'
  // 注入全局utils工具js
  const $utils = inject('$utils')
  const editData = ref({})
  const feildConfig = ref({
    isReadonly: false
  })
  // 子传父
  const emit = defineEmits([])

  const enterpriseList = ref([])

  const loading = ref(false)

  const loadingKeyData = ref(false)
  const keyList = ref([])
  const loadingEntUser = ref(false)
  const entUserList = ref([])
  // const loadingAgent = ref(false)
  // const agentList = ref([])
  const loadingAgentUser = ref(false)
  const agentUserList = ref([])

  function initData(obj) {
    editData.value = obj.data ? obj.data : {}
    feildConfig.value = obj.feildConfig ? obj.feildConfig : feildConfig.value

    
    remoteMethod_1(editData.value.bindSecretKey?editData.value.bindSecretKey:'')
    getAgentUserById()
    getEntUserById(editData.value.enterpriseId?editData.value.enterpriseId:'')

    remoteMethod(null)
  }

  function remoteMethod_1(item) {
    loadingKeyData.value = true
    let type = editData.value.secretKeyType==0?2:1
    $utils.post({
      url: '/api/SecretKeyInfo/NewGetSelectList',
      params: {
        id: item == null ? '' : item,
        secretKeyType: type
      },
      // showLoading: true,
      ok: function (res) {
        keyList.value = res.data
        loadingKeyData.value = false
      }
    })
  }
  function getEntUserById(item) {
    loadingEntUser.value = true
    $utils.post({
      url: '/api/Enterprise/GetEntUserById',
      params: {
        id: item == null ? '' : item
      },
      // showLoading: true,
      ok: function (res) {
        entUserList.value = res.data
        loadingEntUser.value = false
      }
    })
  }
  function getAgentUserById() {
    loadingAgentUser.value = true
    $utils.post({
      url: '/api/AgentUser/GetAgentUserById',
      // showLoading: true,
      ok: function (res) {
        agentUserList.value = res.data
        loadingAgentUser.value = false
      }
    })
  }
  // function remoteMethodAgent(item) {
  //   loadingAgent.value = true
  //   $utils.post({
  //     url: '/api/Agent/GetSelectList',
  //     params: {
  //       id: item == null ? '' : item
  //     },
  //     // showLoading: true,
  //     ok: function (res) {
  //       agentList.value = res.data
  //       loadingAgent.value = false
  //     }
  //   })
  // }
  // 动态获取企业列表
  function remoteMethod(item) {
    loading.value = true
    $utils.post({
      url: '/Api/Enterprise/GetSelectList',
      params: {
        id: item == null ? '' : item
      },
      // showLoading: true,
      ok: function (res) {
        enterpriseList.value = res.data
        // if (item == null) {
        //   enterpriseList.value.push({
        //     value: editData.value.enterpriseId,
        //     label: editData.value.enterpriseName
        //   })
        // }
        loading.value = false
      }
    })
  }

  function submitData() {
    if (!editData.value.buyTime) {
      editData.value.buyTime = ''
    } else {
      editData.value.buyTime = new Date(editData.value.buyTime).toLocaleString('chinese', { hour12: false })
    }
    $utils.post({
      url: '/Api/SecretKeyInfo/DoSave',
      params: editData.value,
      showLoading: true,
      ok: function (res) {
        $utils.message({
          message: res.msg,
          type: 'success'
        })
        emit('close-dialog', false)
      }
    })
  }

  defineExpose({
    initData,
    submitData
  })

</script>

<style scoped>
.saveBtn {
  background-color: #4999FA;
  color: #fff;
  font-weight: normal;
  font-size: 14px;
  padding: 3px 10px;
  border-radius: 3px;
  margin-right: 10px;
}
.saveBtn:hover {
  /* background-color: #7BB8FB; */
  opacity: 0.8;
  cursor: pointer;
}
.split_title {
  background-color: #EBEEF5;
  font-size: 16px;
  height: 30px;
  align-items: center;
  font-family: '楷体';
  font-weight: bold;
  display: flex;
  position: relative;
}
.split_title_content {
  flex-grow: 1;
  text-align: center;
}
.split_title_btn {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  align-items: center;
}
.shrinkbox_v2 {
  width: 70px;
}
.diyinput :deep(.el-input__wrapper){
  border: 0 !important;
  outline: none;
  box-shadow: none;
  font-size: 12px;
}
.diyselect :deep(.el-select__wrapper){
  border: 0 !important;
  outline: none;
  box-shadow: none;
  font-size: 12px;
}
.diyselect :deep(.el-select__wrapper:hover){
  border: 0 !important;
  outline: none;
  box-shadow: none;
}
.diyselect :deep(.el-select__wrapper:active){
  border: 0 !important;
  outline: none;
  box-shadow: none;
}
/* .diyselect :deep(.el-input__wrapper){
  border: 0 !important;
  outline: none;
  box-shadow: none;
  font-size: 12px;
  pointer-events: none; 
}
.diyselect :deep(.el-input__wrapper:hover){
  border: 0 !important;
  outline: none;
  box-shadow: none;
}
.diyselect :deep(.el-input__wrapper:active){
  border: 0 !important;
  outline: none;
  box-shadow: none;
} */
.diyinput :deep(.el-textarea__inner){
  border: 0 !important;
  outline: none;
  box-shadow: none;
  font-size: 12px;
}
.diydatepicker :deep(.el-input__wrapper){
  border: 0 !important;
  outline: none;
  box-shadow: none;
  font-size: 12px;
}
.diyformitem {
  margin-bottom: 0;
}
.diydatapicker :deep(.el-date-editor){
  width: 100%;
}
.diydatapicker :deep(.el-input__wrapper){
  border: 0 !important;
  outline: none;
  box-shadow: none;
}
.diyinput :deep(.el-input-group__append){
  border: 0 !important;
  outline: none;
  background-color: unset;
  box-shadow: none;
  padding: 0 10px 0 5px;
  font-weight: bold;
  font-size: 16px;
}
/deep/ input::-webkit-outer-spin-button,
/deep/ input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
/deep/ input[type='number'] {
  -moz-appearance: textfield;
}
</style>